<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>写博客</title>
    <th:block th:include="hander/navigation :: common(~{::links})"></th:block>
    <!--  js引入  -->
    <th:block th:include="/hander/navigation :: commonjs"></th:block>
    <script th:src="@{/js/wangEditor.js}"></script>

    <style id="writeBlog-css">
        .toolbar{
            border: 1px solid #e7e7e7;
            font-size: 19px;
            background: #e7e7e7;
        }
        .text{
            width: 800px;
            border: 1px solid #e7e7e7;
            font-size: 18px;
            height: 500px;
            min-height: auto; /* 随字数自动增加高度 */
        }
        .blog-title input[type="text"] {
            width: 800px;
            height: 40px;
            background: #e7e7e7;
            border: 0px ;
            outline: none;
        }
    </style>
<!--  wangEditor编辑器  -->
    <script>
        $(function () {
            var E = window.wangEditor;
            var editor = new E('#fixed','#wang');
            // 自定义菜单
            editor.customConfig.menus = [
                'head',  // 标题
                'fontSize',  // 字号
                'fontName',  // 字体
                'bold',  // 粗体
                'italic',  // 斜体
                'underline',  // 下划线
                'strikeThrough',  // 删除线
                'foreColor',  // 文字颜色
                'backColor',  // 背景颜色
                'link',  // 插入链接
                'list',  // 列表
                'justify',  // 对齐方式
                'quote',  // 引用
                'emoticon',  // 表情
                'image',  // 插入图片
                'table',  // 表格
                'code',  // 插入代码
                'undo',  // 撤销
                'redo'  // 重复
            ]
            //设置区域底层
            editor.customConfig.zIndex = 10;
            // 上传图片到服务器 信息为服务器路径
            editor.customConfig.uploadImgServer = '/upload'
            // 更改图片上传大小 为3MB
            editor.customConfig.uploadImgMaxSize = 3*1024*1024
            // 限制一次最多可以传五张图片
            editor.customConfig.uploadImgMaxLength = 5
            // 创建富文本编辑器
            editor.create();
            //    发布博客
            $("#publishBlog").click(function () {
                //文章标题 不能为空
                var title = $("#etitle").val();
                // 内容 不能为空
                var neir = editor.txt.html();
                var neir1 = editor.txt.text();
                // 文章个人分类 是否选中
                var special = $('input:radio[name="special"]:checked').val();
                // 文章网站 是否选中
                var classify = $('input:radio[name="classify"]:checked').val();
                // 文章类型是否选中
                var state = $("#state").val();
                // 发布类型是否选中
                var status = $("#status").val();
                // 文章标签是否选中 数组
                var label = $('input:checkbox[name="label"]:checked');
                var lab = [label.length];
                 for (let i = 0; i < label.length ; i++) {
                     lab[i] = label[i].value;
                 }
                // alert(special[0].value);
                if (/\S/.test(title)) {
                    if (/\S/.test(neir1)) {
                        if (label.length > 0 ) {
                            if (special != null) {
                                if (classify != null) {
                                    if (/\S/.test(state) && state != -1 ) {
                                        if (/\S/.test(status) && status != -1) {
                                            // 异步发布博客
                                            $.ajax({
                                                type: "post",
                                                url: "/essay/publish-blog",
                                                async: false,
                                                contentType: "application/json;charset=UTF-8",
                                                dataType: "JSON",
                                                data: JSON.stringify({
                                                    "etitle": title,
                                                    "eessay": neir,
                                                    "estate": state,
                                                    "estatus": status,
                                                    "bid": lab,
                                                    "sid": special,
                                                    "cid": classify,
                                                    "aid": $("#aid").val()
                                                }),
                                                success: function (resultMsg) {
                                                    if (resultMsg.state == 201) {
                                                        layer.msg(resultMsg.msg, {icon: 1,time: 1500});
                                                        $("#blogForm")[0].reset();//重置
                                                    } else {
                                                        layer.msg('发布失败,请稍后重试!', {icon: 0});
                                                    }
                                                },
                                                error: function () {
                                                    layer.msg('API接口异常，稍后重试。', {icon: 2, time: 1500});
                                                }
                                            });
                                        } else {
                                            layer.msg('请选择发布类型');
                                        }
                                    }else {
                                        layer.msg('请选择文章类型');
                                    }
                                }else {
                                    layer.msg('请选择网站分类');
                                }
                            }else {
                                layer.msg('请选择个人分类');
                            }
                        }else {
                            layer.msg('请选择文章标签');
                        }
                    }else {
                        layer.msg('请输入文章内容');
                    }
                } else {
                    layer.msg('请输入文章标题');
                };

            });

        });

    </script>
</head>
<body class="after-body">
<!--  顶部导航栏  -->
<th:block th:replace="/hander/navigation :: navheader" ></th:block>
<div class="row body2 leftuserinfo">
<div class="col-md-12" style="margin: 25px 0 0 0;" >
<form id="blogForm">
<!-- 隐藏域 -->
    <input type="hidden" id="aid" th:value="${session.aid}">
<!--  编写文章区域  -->
    <div class="blog-title" id="adminblogright" style="float: right;">
<!--  文章标题 -->
        <div> <input type="text" placeholder="请输入文章标题"  id="etitle" name="etitle" autocomplete="off" maxlength="100"></div>
        <div style="padding: 18px 0; color: #ccc"></div>
        <!--   wangEditor编辑器     -->
<!-- 自定义菜单栏   -->
        <div class="toolbar" id="fixed"></div>
<!--  编写文章内容区域 -->
        <div class="text" id="wang" name="eessay" ></div>
<!--  文章发布  -->
        <div style="margin: 20px  0 60px 40px;">
<!-- 文章标签 -->
            <div class="top-left">
                <span class="label label-primary" style="padding: 5px 0 5px 5px;">文章标签&nbsp;: </span>
                &emsp;&emsp;
                <th:block th:if="${labels.size() != 0}" th:each="label,labelStat:${labels}">
                    <label class="checkbox-inline">
                        <input type="checkbox" name="label" th:value="${label.bid}" th:text="${label.bname}">
                    </label>
                    &emsp;&emsp;
                </th:block>
            </div>
<!--  个人分类 -->
            <div class="top-left">
                <span class="label label-primary" style="padding: 5px 0 5px 5px;">个人分类&nbsp;: </span>
                &emsp;&emsp;
                <th:block th:if="${specials.size() != 0}" th:each="special,specialStat:${specials}">
                    <label class="radio-inline">
                        <input type="radio" name="special" th:value="${special.sid}" th:text="${special.sname}">
                    </label>
                    &emsp;&emsp;
                </th:block>
                <label>
                    <button type="button" class="btn btn-default btn-sm">
                        <span class="glyphicon glyphicon-edit"></span>
                        新建分类
                    </button>
                </label>
            </div>
<!-- 网站分类 -->
            <div class="top-left">
                <span class="label label-primary" style="padding: 5px 0 5px 5px;">网站分类&nbsp;: </span>
                &emsp;&emsp;
                <th:block th:if="${classifys.size() != 0}" th:each="classify,classifyStat:${classifys}">
                    <label class="radio-inline">
                        <input type="radio" name="classify" th:value="${classify.cid}" th:text="${classify.cname}" >
                    </label>
                    &emsp;&emsp;
                </th:block>
            </div>
<!-- 文章类型 -->
            <div class="top-left">
                <span class="label label-primary" style="padding: 5px 0 5px 5px;">文章类型&nbsp;:&nbsp;</span>
                <select id="state" class="form-control" style="float: right;margin-right: 83px;">
                    <option value="-1">请选择</option>
                    <option value="0">原创</option>
                    <option value="1">转载</option>
                </select>
            </div>
<!-- 发布类型 -->
            <div class="top-left">
                <span class="label label-primary" style="padding: 5px 0 5px 5px;">发布类型&nbsp;:&nbsp;</span>
                <select id="status" class="form-control" style="float: right;margin-right: 83px;">
                    <option value="-1">请选择</option>
                    <option value="0">公开</option>
                    <option value="1">私密</option>
                </select>
            </div>
<!-- 发布博客 -->
            <div class="top-left" style="text-align: right;">
                <button type="button" id="publishBlog" class="btn btn-success " style="outline: none;">发布博客</button>
                <button type="button" class="btn btn-danger" onclick="javascript:location.reload()" style="margin: 0 84px 0 30px;outline: none;">返回</button>
            </div>
        </div>
    </div>
<!--  左侧个人类别区域  -->
    <div style="float: left;margin-bottom: 20px;" >
        <!-- 博客管理 左侧导航  -->
        <th:block th:replace="/hander/navigation :: adminBlog-left"></th:block>
    </div>
</form>
</div>
</div>
<style>
    .blog-title{
        width: 800px;
        height: auto;
    }
    .top-left{
        margin-top: 30px;
    }
</style>
</body>

</html>
